<template>
	<el-dialog title="合并餐桌" :visible.sync="turnDeskVisible" :close-on-click-modal="false" width="60%" center>
		<div>
			<el-row :gutter="20">
				<div style="float: right;"><el-button type="success" @click="selectDiningTable">确认</el-button></div>
				<el-col :span="24">
					<div>
						<el-tabs type="card" v-model="activeName" @tab-click="querySeatById">
							<el-tab-pane label="全部" name="0">
								<el-row :gutter="12">
									<el-col :span="4" v-for="item in dinningTableList" :key="item.id"
									 v-show="sourceInfo.id !== item.id && item.master === 0 && item.slave === 0 || item.status === 5">
										<el-card :shadow="shadow" :style="'background-color:' + item.style">
											<div class="tableName">
												<el-checkbox-group @change="getDeskInfo" size="mini" style="font-size: 0.0625rem;" v-model="tableList">
													<el-checkbox :border="true"  :label="item.diningTableNo"></el-checkbox>
												</el-checkbox-group>
											</div>
											<br />
											<div class="seatNum">{{ item.seatNum }}人桌</div>
											<br />
										</el-card>
										<br />
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane v-for="item in regionList" :key="item.id" :label="item.regionName" :name="item.id">
								<el-row :gutter="12">
									<el-col :span="4" v-for="item in dinningTableList" :key="item.id"
									 v-show="sourceInfo.id !== item.id && item.master === 0 && item.slave === 0">
										<el-card :shadow="shadow" :style="'background-color:' + item.style">
											<div class="tableName" style="size: 1.25rem;">
												<el-checkbox-group size="mini"  v-model="tableList">
													<el-checkbox  :border="true" :label="item.diningTableNo"></el-checkbox>
												</el-checkbox-group>
											</div>
											<br />
											<div class="seatNum">{{ item.seatNum }}人桌</div>
											<br />
										</el-card>
										<br />
									</el-col>
								</el-row>
							</el-tab-pane>
						</el-tabs>
					</div>
				</el-col>
			</el-row>
		</div>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			tableList: [],
			dataList: [],
			seatNumList: [],
			regionList: [],
			activeName: '0',
			dinningTableList: [],
			shadow: 'never',
			KeyBoardVisible: false,
			PayComponentVisible: false,
			diningTableNo: '',
			eatNumber: '',
			orderNo: '',
			foodList: [],
			dataForm: {
				orderId: '',
				deskId: '',
				peopleNum: '',
				openTime: ''
			},
			openDeskInfo: null,
			orderInfo: '',
			clickCardCss: '',
			foodInfo: null,
			turnDeskVisible: false,
			orderInfoList:[]
		};
	},
	created() {},
	methods: {
		init(info) {
			this.turnDeskVisible = true;
			this.sourceInfo = info;
			this.getDataList();
		},

		//选择餐台
		selectDiningTable() {
			const arr = []
			this.dinningTableList.forEach(item => {
				this.tableList.forEach(items => {
					if(item.diningTableNo === items){
						arr.push(item.id)
					}
				})
			})

			this.$confirm('你确定将【' + this.sourceInfo.diningTableNo + '】与【' + this.tableList + '】桌合并吗', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl(`/reception/tstoreopendesk/mergeDesk`),
						method: 'post',
						data: this.$http.adornData({
							orderInfo: this.sourceInfo,
							targetDeskList: arr
						})
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.$message({
								message: '合并餐台成功',
								type: 'success',
								duration: 1500
							});
						} else {
							this.$message.error(data.msg);
						}
						this.orderInfo = '';
						this.tableList = []
						this.turnDeskVisible = false;
						this.$emit('refreshDataList');
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消何并'
					});
				});
		},
		querySeatById(tab, event) {
			var status = 1;
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/querySeatById'),
				method: 'get',
				params: this.$http.adornParams({
					status: 2,
					storeTypeId: this.sourceInfo.storeTypeId,
					seatNum: 0,
					regionId: tab.name,
					page:1,
					limit:1000
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dinningTableList = data.data.dinningTableList.records;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		},

		getDataList() {
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/listSeat'),
				method: 'get',
				params: this.$http.adornParams({
					status: 2,
					storeTypeId: this.sourceInfo.storeTypeId,
          seatNum: 0,
          regionId: 0,
          page:1,
					limit:1000
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data;
					this.seatNumList = data.data.seatNumList;
					this.regionList = data.data.regionList;
					this.dinningTableList = data.data.dinningTableList.records;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
			});
		}
	}
};
</script>

<style>
.tableName {
	display: -moz-box; /*兼容Firefox*/
	display: -webkit-box; /*兼容FSafari、Chrome*/

	-moz-box-align: center; /*兼容Firefox*/
	-webkit-box-align: center; /*兼容FSafari、Chrome */

	-moz-box-pack: center; /*兼容Firefox*/
	-webkit-box-pack: center; /*兼容FSafari、Chrome */

	font-size: 18px;
	font-weight: 3000;
}
.seatNum {
	text-align: center;
}

.footer {
	height: 100px;

	width: 100%;

	background-color: #ddd;

	position: fixed;

	bottom: 0;
}
.cursor {
	cursor: pointer;
	text-decoration: none;
}
</style>
